<template>
  <div>
    <Yq-header v-if="isShowHeader"></Yq-header>
    <alert v-model="show" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <group gutter="0">
      <!--<div style="background: #fff;height: 30px;"><span></span></div>-->
      <!--<flexbox orient="vertical" :gutter="0" style="background: #fff;">-->
        <!--<flexbox-item style="text-align: center;">-->
          <!--&lt;!&ndash;<div class="userImgBox">&ndash;&gt;-->
          <!--&lt;!&ndash;<div style="margin: 20px 0;text-align: center;">&ndash;&gt;-->
            <!--<img :src=user.avatar id="userImg">-->
          <!--&lt;!&ndash;</div>&ndash;&gt;-->
          <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--</flexbox-item>-->
        <!--<flexbox-item><div class="flex-demo" style="padding-bottom: 20px">-->
          <!--<p style="color: #636363;margin-bottom: 5px;">-->
            <!--<span class="userName">{{user.nick}}</span>-->
            <!--<span style="color: #ef8616;" v-if="user.tel ===''||user.tel===null||user.tel===undefined" @click="userInformationFn">(绑定手机号)</span>-->
            <!--<span class="userName" v-if="user.tel !==''&&user.tel!==null&&user.tel!==undefined">({{user.tel}})</span>-->
          <!--</p>-->
          <!--<span id="isVip" style="color: #636363;" v-if="user.vip!==1" @click="userMemberFn(0)">开通会员享特权>></span>-->
          <!--<button id="vipMark" v-if="user.vip===1" @click="userMemberFn(1)">VIP</button>-->
        <!--</div>-->
        <!--</flexbox-item>-->
      <!--</flexbox>-->
      <flexbox :gutter="0" style="padding: 25px 0;">
        <flexbox-item :span="3.2">
          <div style="padding-left: 22px;padding-right: 15px;">
            <img :src=user.avatar id="userImg">
          </div>
        </flexbox-item>
        <flexbox-item :span="5">
          <div style="padding-left: 17px;">
            <p class="userName" style="white-space: nowrap;color: #333333;font-size: 15px;width: 100%;overflow: hidden;text-overflow: ellipsis;">{{user.nick}}</p>
            <p style="color: #999999;font-size: 12px;" v-if="user.tel ===''||user.tel===null||user.tel===undefined" @click="userInformationFn">绑定手机号</p>
            <p class="userName" style="font-size: 12px;color: #999999;" v-if="user.tel !==''&&user.tel!==null&&user.tel!==undefined">{{user.tel}}</p>
          </div>
        </flexbox-item>
        <flexbox-item>
          <div style="padding-right: 10px;">
            <x-button v-if="user.vip!==1" @click.native="userMemberFn(0)" type="primary" action-type="submit" style="background: #f96320;font-size: 14px;height: 24px;color: white;display: block;text-align: center;border-radius: 5px;line-height: 24px;">成为会员</x-button>
            <x-button v-if="user.vip===1" @click.native="userMemberFn(1)" type="primary" action-type="submit" style="width: 45px;background: #f96320;font-size: 14px;height: 24px;color: white;display: block;text-align: center;border-radius: 5px;line-height: 24px;">VIP</x-button>
          </div>
        </flexbox-item>
      </flexbox>
    </group>
    <group>
      <cell title="我的订单" value="所有订单" is-link @click.native="userOrderFn"></cell>
      <cell></cell>
      <flexbox :gutter="0">
        <flexbox-item @click.native="orderInfo(1)"><div class="flex-demo" style="font-size: 12px;color: #636363;">
          <img slot="icon" src="../../../assets/images/user/icon_dfk.png">
          待付款
        </div></flexbox-item>
        <flexbox-item @click.native="orderInfo(2)"><div class="flex-demo" style="font-size: 12px;color: #636363;">
          <img slot="icon" src="../../../assets/images/user/icon_dfh.png">
          待发货
        </div></flexbox-item>
        <flexbox-item @click.native="orderInfo(3)"><div class="flex-demo" style="font-size: 12px;color: #636363;">
          <img slot="icon" src="../../../assets/images/user/icon_dsh.png">
          待收货
        </div></flexbox-item>
        <flexbox-item @click.native="orderInfo(4)"><div class="flex-demo" style="font-size: 12px;color: #636363;">
          <img slot="icon" src="../../../assets/images/user/icon_jycg.png">
          交易成功
        </div></flexbox-item>
        <flexbox-item @click.native="orderInfo(5)"><div class="flex-demo" style="font-size: 12px;color: #636363;">
          <img slot="icon" src="../../../assets/images/user/icon_sydd.png">
          退款
        </div></flexbox-item>
      </flexbox>
    </group>
    <group>
      <cell title="我的钱包" value="" is-link @click.native="userWalletFn"></cell>
      <cell title="我的收藏" value="" is-link @click.native="userCollectionFn"></cell>
      <!--<cell title="卡券包" value="" is-link @click.native="userCouponsFn">--><!--</cell>-->
      <cell title="收货地址管理" value="" is-link @click.native="userAddressFn"></cell>
      <cell title="邀请好友" value="" is-link @click.native="userInvitationFn"></cell>
      <!--<cell title="分享页面" value="" is-link @click.native="userShareFn"></cell>-->
      <cell title="生日提醒" value="" is-link @click.native="birthdayFn"></cell>
    </group>
    <p style="text-align: center;color: blue;margin-bottom: 5px;" align="center">
      <a  :href="qqLink"><p style="color: #999999;padding-top: 5px;font-size: 14px;">联系客服</p></a>
    </p>
  </div>
</template>

<script>
  import { Group, Cell, Flexbox, FlexboxItem, Divider, Alert, Badge, XButton } from 'vux'
  import * as types from '../../../store/types'
  import * as urls from '../../../api/urls'
  import YqHeader from '../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      Flexbox,
      FlexboxItem,
      Divider,
      YqHeader,
      Alert,
      Badge,
      XButton
    },
    data () {
      return {
        qqLink: '',
        show: false,
        message: '',
        isShowHeader: false,
        isVip: false,
        hasAddress: false,
        user: {
          vip: 0,
          nick: '',
          avatar: '',
          tel: ''
        },
        userId: ''
      }
    },
    methods: {
      userMemberFn (type) {
        if (type === 0) {
          this.$store.commit(types.USER_INFO, {xufei: false})
          this.$router.push({
            path: '/member/GetMember'
          })
        } else {
          this.$router.push({
            path: '/member/Rights'
          })
        }
        this.$router.go(1)
      },
      userWalletFn () {
        this.$router.push({
          path: '/UserWallet'
        })
        this.$router.go(1)
      },
      userCollectionFn () {
        this.$router.push({
          path: '/UserCollection'
        })
        this.$router.go(1)
      },
      userCouponsFn () {
        let params = {
          title: '卡券包',
          needRight: false
        }
        this.$router.push({
          path: '/UserCoupons',
          query: {
            params: JSON.stringify(params)
          }
        })
        this.$router.go(1)
      },
      userInformationFn () {
        this.$router.push({
          path: '/UserInformation'
        })
        this.$router.go(1)
      },
      userAddressFn () {
        this.$router.push({
          path: '/UserAddress'
        })
        this.$router.go(1)
      },
      userInvitationFn () {
        this.$router.push({
          path: '/UserInvitation'
        })
        this.$router.go(1)
      },
      userShareFn () {
        this.$router.push({
          path: '/UserShare'
        })
        this.$router.go(1)
      },
      birthdayFn () {
        this.$router.push({
          path: '/UserBirthday'
        })
        this.$router.go(1)
      },
      userOrderFn () {
        this.$store.commit(types.USER_ORDER, {index: 0})
        this.$store.commit(types.USER_ORDER, {selectType: 0})
        this.$router.push({
          path: '/order/OrderIndex'
        })
        this.$router.go(1)
      },
      orderInfo (index) {
        if (index !== 5) {
          this.$store.commit(types.USER_ORDER, {index: index})
          this.$router.push({
            path: '/order/OrderIndex'
          })
          this.$router.go(1)
        } else {
          this.$router.push({
            path: '/order/RefundInfo'
          })
          this.$router.go(1)
        }
      },
      getUserInfo () {
        let userId = this.$store.state.userInfo.id
        let that = this
        that.http(urls.userIndex, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.$store.commit(types.USER_INFO, {nick: res.data.user.nick, avatar: res.data.user.avatar})
            that.user = res.data.user
            that.user.nick = String(res.data.user.nick)
            if (res.data.user.vip === 1) {
              that.$store.commit(types.USER_INFO, {vipExpiretime: (res.data.user.vipExpiretime).substr(0, 10)})
            }
            that.hasAddress = res.data.hasAddress
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      getQueryString (name) {
        let userId = window.location.href.substr('userId='.length + window.location.href.indexOf('?') + 1, window.location.href.length)
        return userId
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      },
      weixinfn5 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      let qq = this.$store.state.empower.sysqq
      this.qqLink = 'http://wpa.qq.com/msgrd?v=3&uin=' + qq + '&site=qq&menu=yes'
      if (this.$store.state.userInfo.id === '' || this.$store.state.userInfo.id === null || this.$store.state.userInfo.id === undefined) {
        this.userId = this.getQueryString('userId')
        if (this.userId !== '' && this.userId !== null && this.userId !== undefined) {
          this.$store.commit(types.USER_INFO, {id: this.userId})
          this.getUserInfo()
        } else {
          let url = window.location.origin
          window.location.href = url + '/api/wxAuth/index?type=t1'
        }
      } else {
        this.userId = this.$store.state.userInfo.id
        this.getUserInfo()
      }
      this.weixinfn5()
    }
  }
</script>

<style scoped="scoped">
  .flex-demo {
    text-align: center;
    color: #000;
    font-size: 12px;
    /*background-color: #20b907;*/
    border-radius: 4px;
    background-clip: padding-box;
    margin-bottom: 10px;
  }
  .flex-demo >img{
    display: block;
    height: 20px;
    margin: 5px auto;
  }
  #userImg{
    width: 70px;
    border-radius: 50%;
  }
  .userImgBox{
    border: solid 1px white;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin: 10px auto;
  }
  .userName{
    font-size: 14px;
  }
  #isVip{
    color: #ef8616;
    /*border-bottom: 1px solid #ef8616;*/
  }
  #vipMark{
    border: none;
    outline: none;
    background: #ef8616;
    color: white;
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 10px;
  }
  .weui_tab_bd {
    overflow: auto;
  }
</style>
